[Swift][OSS] 普通のUIPageControlにはもう飽きた！アニメーションがクールなCHIPageControl

#iPhone

加藤潤

2017.03.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。モバイルアプリサービス部の加藤です。
今日githubでSwiftのtrendingを見てみたら簡単に導入できそうなCHIPageControlというOSSを見かけたので試してみました。

CHIPageControlとは

CHIPageControl is a set of cool animated page controls to replace boring UIPageControl.

READMEより引用。

日本語だと

「CHIPageControlはありきたりなUIPageControlを置き換えるクールなアニメーションページコントロールのセットです。」

こんな感じでしょうか。 MITライセンスで公開されており、使用するための条件は以下です。

iOS 9.0+
Xcode 8+
Swift 3

検証環境

本記事の検証環境は以下の通りです。

Xcode Version 8.2.1（8C1002）
Swift Version 3.0.2
CocoaPods Version 1.2.0

導入手順

CocoaPodsでインストール可能です。
以下のようにPodfileにpod 'CHIPageControl', '~> 0.0.1'と記載してpod installすればOKです。

platform :ios, '9.0'

target 'ターゲット名' do
  use_frameworks!
  pod 'CHIPageControl', '~> 0.0.1'
end

2017/3/23追記 記事執筆時点のバージョンは0.0.1でしたが、頻繁にアップデートが行われており、2017/3/23現在の最新バージョンは0.0.6です。都度バージョンを確認することをお勧めします。

8種類のクラス

CHIPageControlでは以下のクラスが提供されていて、クラスによってアニメーションが異なります。
それぞれ試してみました。

CHIPageControlAji
CHIPageControlAleppo
CHIPageControlChimayo
CHIPageControlFresno
CHIPageControlJalapeno
CHIPageControlJaloro
CHIPageControlPaprika
CHIPageControlPuya

Storyboardにコントロールを配置

コードでコントロールを生成して表示することも可能ですが、今回はStoryboardにコントロールを配置します。以下のようにUIViewを任意の位置・大きさで配置します。
次にIdentity inspectorでClassには上記8種類のクラスのいずれかを、Moduleには「CHIPageControl」を設定します。

storyboard

パラメーターを設定

Attributes inspectorで「Base Page Control」のパラメーターとして、以下を設定することが可能です。今回は以下のように設定しました。

プロパティ名	説明	デフォルト値	今回設定した値
numberOfPages	ページ数	0	4
progress	ページの進捗、進み具合	0	0
Padding	ドットとドットの間隔	5	8
Radius	ドットの大きさ	10	6
inactiveTransparency	アクティブでないドットの透明度。0.0が透明、1.0が非透明。	0.4	0.4
hidesForSinglePage	numberOfPagesが0の場合にコントロールを非表示にするかどうか	true	Default（=true）
borderWidth	ドットの線幅	0	0

attributes_inspector

progressをアニメーションさせる

ページコントロールのset(progress:animated:)メソッドでprogressをアニメーションさせます。１秒ごとにアニメーションするようにしました。

import UIKit
import CHIPageControl

enum Direction {
    case left
    case right

    func newProgress(withCurrentProgress current: Int) -> Int {
        switch self {
        case .left:
            return current - 1
        case .right:
            return current + 1
        }
    }
}

class ViewController: UIViewController {

    @IBOutlet weak var pageControl: CHIBasePageControl!

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        var direction = Direction.right
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
            let currentProgress = Int(self.pageControl.progress)
            let numberOfPages = self.pageControl.numberOfPages

            if currentProgress == numberOfPages - 1 {
                direction = .left
            } else if currentProgress == 0 {
                direction = .right
            }

            let newProgress = direction.newProgress(withCurrentProgress: currentProgress)
            self.pageControl.set(progress: newProgress, animated: true)
        }
    }
}